<script setup>
import { ref, onBeforeUnmount, reactive } from 'vue'
import { initWS } from '/src/utils/initWS.js'
import { dataPro_equipment } from '../js/dataPro_equipment.js'

const ip = `ws://${window.location.host}/ws/`
// const ip = 'ws://10.202.1.20:20038/'
const config = {
  path: `${ip}monitor/running-info`,
  // path: 'ws://localhost:8080',
  name: 'mec运行参数',
}

const data = ref(null)

const handleWsData = (e) => {
  data.value = dataPro_equipment(JSON.parse(e.data)['mec-running-info'])
}
const ws = initWS(config, handleWsData)

// 卸载
onBeforeUnmount(() => {
  if (ws) ws.close()
})
</script>
<template>
  <div class="equipment-container" v-if="data">
    <div class="top">
      <p>MEC设备信息</p>
    </div>

    <div class="showTableEle2" v-for="(item, key) in data">
      <p>{{ key }}</p>
      <el-table :data="item" border style="width: 40%" show-overflow-tooltip :key="reload">
        <el-table-column prop="name" label="模块" width="180" />
        <el-table-column prop="value" label="状态" />
      </el-table>
    </div>
  </div>
</template>

<style lang="less" scoped>
.equipment-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow-y: auto;
}

.showTableEle2 {
  margin-bottom: 20px;
  > p {
    margin-bottom: 10px;
    font-size: 14px;
  }
}
::v-deep .el-table .cell {
  padding: 4px 10px;
}
.top {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
</style>
